<template>
  <el-dialog title="视频" :visible.sync="dialogVisible" width="30%" @close="close">
    <video id="my-video" class="video-js vjs-default-skin" controls autoplay>
      <source :src="videoPath" type="application/x-mpegURL" />
    </video>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'

export default {
  data () {
    return {
      myVideo: null,
      dialogVisible: false,
      videoPath: null
    }
  },
  methods: {
    propShow () {
      this.dialogVisible = true
      const index = Math.floor(Math.random() * 3) + 1
      const data = [
        'http://1257120875.vod2.myqcloud.com/0ef121cdvodtransgzp1257120875/3055695e5285890780828799271/v.f230.m3u8',
        'https://videos8.jsyunbf.com/20190717/s6DaVnKb/index.m3u8',
        'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8',
        'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8'
      ]
      this.videoPath = data[index]
      console.log(index)
      if (this.myVideo) {
        this.myVideo.src(this.videoPath)
      } else {
        this.getVideo()
      }
    },
    getVideo () {
      this.$nextTick(function () {
        this.myVideo = videojs(
          'my-video',
          {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true
          },
          function () {
            // this.play()
          }
        )
      })
    },
    close () {
      this.myVideo.src('')
      this.myVideo.reset()
      console.log(this.myVideo)
    }
  }
}
</script>

<style>
#my-video {
  width: 100%;
  height: 30vh;
}
</style>
